﻿<template>
  <div>
    <van-search
      v-model="queryParam.keyword"
      placeholder="关键字"
      @search="getDataList"
    >
      <template #left>
        <van-dropdown-menu>
          <van-dropdown-item v-model="queryParam.condition" :options="option" />
        </van-dropdown-menu>
      </template>
    </van-search>
    <van-pull-refresh v-model="loading" @refresh="getDataList">
      <van-list v-model="loading" :finished="!loading">
        <van-swipe-cell v-for="item in data" :key="item.Id">
          <van-cell @click="handleEdit(item.Id)" icon="label-o">
            <template #icon>
              <van-image
                width="24"
                height="24"
                round
                alt="avatar"
                :src="item.Avatar | AvatarFilter"
              />
            </template>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span>
                <span
                  v-if="type === '1'"
                  :style="{
                    color:
                      item.IsReaded ||
                      (item.ReadingMarks || '').indexOf(userInfo.Id) >= 0
                        ? 'gray'
                        : 'black',
                    'font-weight':
                      item.IsReaded ||
                      (item.ReadingMarks || '').indexOf(userInfo.Id) >= 0
                        ? 'normal'
                        : 'bold'
                  }"
                >
                  {{ item.CreatorName }}- {{ item.CreateTime }}
                </span>
                <span v-if="type !== '1'">
                  {{ item.UserNames | filterReplaceName }}-
                  {{ item.CreateTime }}
                </span>
              </span>
            </template>
            <template #label>
              <span>{{ item.Title }}</span>
            </template>
          </van-cell>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              style="height:100%; margin-left:1px"
              @click="handleDelete([item.Id])"
            />
          </template>
        </van-swipe-cell>
      </van-list>
    </van-pull-refresh>
    <van-pagination
      v-model="pagination.current"
      :total-items="pagination.total"
      :show-page-size="pagination.pageSize"
      @change="getDataList"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>

    <edit-form ref="editForm" :parentObj="this"></edit-form>
  </div>
</template>

<script>
import {
  D_UserMail_GetDataList,
  D_UserMail_DeleteData
} from "@/api/D_Manage/D_UserMail";
import EditForm from "./EditForm";
import { mapGetters } from "vuex";

export default {
  components: {
    EditForm
  },
  props: {
    type: {
      default: "1"
    }
  },
  mounted() {
    if (this.type === "1") {
      this.filtersend = true;
    } else if (this.type === "2" || this.type === "3") {
      this.filterreceive = true;
    }
    this.getDataList();
  },
  data() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: "Id", order: "asc" },
      loading: false,
      queryParam: {},
      visible: false,
      selectedRowKeys: [],
      option: [
        { text: "发件人", value: "CreatorName" },
        { text: "收件人", value: "UserNames" },
        { text: "标题", value: "Title" },
        { text: "内容", value: "Text" }
      ],
      filterreceive: false,
      filtersend: false
    };
  },
  filters: {
    filterReplaceName(item) {
      if (item === null) {
        return "";
      }
      return item.replace(/\^/g, ".").slice(1, -1);
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    getDataList() {
      this.selectedRowKeys = [];
      this.queryParam.userId = this.type === "1" ? this.userInfo.Id : "";
      this.queryParam.creatorId =
        this.type === "2" || this.type === "3" ? this.userInfo.Id : "";
      this.queryParam.status = this.type === "3" ? 0 : 1;

      this.loading = true;
      D_UserMail_GetDataList({
        PageIndex: this.pagination.current,
        PageRows: this.pagination.pageSize,
        SortField: this.sorter.field || "Id",
        SortType: this.sorter.order,
        Search: this.queryParam,
        ...this.filters
      }).then(resJson => {
        this.loading = false;
        this.data = resJson.Data;
        const pagination = { ...this.pagination };
        pagination.total = resJson.Total;
        this.pagination = pagination;
      });
    },
    hanldleAdd() {
      this.$refs.editForm.openForm();
    },
    handleEdit(id) {
      this.$refs.editForm.openForm(id);
    },
    handleDelete(ids) {
      var thisObj = this;

      this.$dialog
        .confirm({
          title: "确认删除吗?"
        })
        .then(() => {
          // on confirm
          D_UserMail_DeleteData(ids).then(resJson => {
            if (resJson.Success) {
              this.$toast.success("操作成功");
              this.getDataList();
            } else {
              this.$toast.fail(resJson.Msg);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    setDataRead(id) {
      var temp = this.data.find(p => p.Id === id);
      if (temp !== null && typeof temp !== "undefined") {
        temp.IsReaded = true;
      }
    }
  }
};
</script>

<style lang="less">
.van-dropdown-menu {
  .van-dropdown-menu__bar {
    height: 33px;
    min-width: 80px;
  }
}
</style>
